class Page {
  constructor(el, options = {}) {
    this.el = document.querySelector(el)
    this.options = options
    this.init()
  }
  init() {
    this.createTag()
    this.bindEvent()
  }
  bindEvent() {
    this.el.onclick = (evt) => {
      let e = evt || window.event
      let target = e.target || e.srcElement
      //console.log(target.nodeName);
      if (target.nodeName == 'P') {
        switch (target.innerText) {
          case this.options.pageTag.first:
            this.options.pageInfo.pageNum = 1
            break;
          case this.options.pageTag.prev:
            if (this.options.pageInfo.pageNum == 1) return
            this.options.pageInfo.pageNum--
            break;
          case this.options.pageTag.next:
            if (this.options.pageInfo.pageNum == this.options.pageInfo.totalPage) return
            this.options.pageInfo.pageNum++
            break;
          case this.options.pageTag.last:
            this.options.pageInfo.pageNum = this.options.pageInfo.totalPage
            break;
          default:
            if (parseInt(target.innerHTML) > 0) {
             // console.log(parseInt(target.innerHTML));
             //只要从页面获取的就是字符串
              this.options.pageInfo.pageNum = parseInt(target.innerHTML)
            }
            break;
          /*   case this.options.pageTag.first:
              this.options.pageInfo.pageNum = 1
              break; */
        }
        this.createTag()
      }
    }
  }
  createTag() {
    this.el.innerText = ''
    let pageTag = this.options.pageTag
    for (let k in pageTag) {
      //console.log(pageTag[k]);
      this.createP('p', pageTag[k], this.el)
    }
    this.createNum()
  }
  createNum() {
    let box = this.el.querySelector('p:nth-of-type(3)')
    box.style.border = 'none'
    box.style.margin = '0px'
    box.style.padding = '0px'
    let pageNum = this.options.pageInfo.pageNum
    this.options.pageInfo.totalPage = Math.ceil(this.options.pageInfo.totalData / this.options.pageInfo.pageSize)
    let totalPage = this.options.pageInfo.totalPage
    if (totalPage < 7) {
      for (let i = 1; i <= totalPage; i++) { this.createP('p', i, box) }
    } else if (pageNum < 5) {
      for (let i = 1; i <= 5; i++) { this.createP('p', i, box) }
      this.createP('p', '...', box)
      this.createP('p', totalPage - 1, box)
      this.createP('p', totalPage, box)
    }
    if (pageNum == 5) {
      for (let i = 1; i <= 7; i++) { this.createP('p', i, box) }
      this.createP('p', '...', box)
      this.createP('p', totalPage - 1, box)
      this.createP('p', totalPage, box)
    }
    if (pageNum > 5 && pageNum < totalPage - 4) {
      for (let i = 1; i <= 2; i++) { this.createP('p', i, box) }
      this.createP('p', '...', box)
      this.createP('p', pageNum - 2, box)
      this.createP('p', pageNum - 1, box)
      this.createP('p', pageNum, box)
      this.createP('p', pageNum + 1, box)
      this.createP('p', pageNum + 2, box)
      this.createP('p', '...', box)
      this.createP('p', totalPage - 1, box)
      this.createP('p', totalPage, box)
    }
    if (pageNum >= totalPage - 4) {
      for (let i = 1; i <= 2; i++) { this.createP('p', i, box) }
      this.createP('p', '...', box)
      for (let i = totalPage - 4; i <= totalPage; i++) { this.createP('p', i, box) }
    }
  }
  createP(tagName, content, fartherName) {
    let pObj = document.createElement(tagName)
    pObj.innerText = content
    pObj.style.border = '1px solid black'
    pObj.style.margin = '0 5px'
    pObj.style.padding = '0 5px'
    pObj.style.display = 'inline-block'
    if (content == this.options.pageInfo.pageNum) pObj.style.background = 'orange'
    fartherName.appendChild(pObj)
  }
}